<template>
  <div class="info-title" v-if="isShow">
    <i class="resume" :class="`resume-${icon}`" v-if="isShowIcon" />
    <r-input hint="自定义标题..." class="info-title__input" v-bind="$attrs" />
  </div>
</template>

<script>
import RInput from "./RInput";

export default {
  name: "RTitle",
  components: {
    RInput,
  },
  props: {
    prefix: String,
    suffix: String,
    isShow: Boolean,
    icon: String,
    isShowIcon: Boolean,
  },
  setup() {
    // const customStyle = inject("customTitleStyle") || {};
    // return {
    //   customStyle,
    // };
  },
};
</script>

<style scoped lang="less">
.info-title {
  margin-bottom: 5px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  font-size: 20px;
  font-weight: bold;
  align-items: center;
  color: var(--baseColor);

  &__input {
    border-color: var(--baseColor);
  }

  .icon {
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;

    img {
      width: 15px;
      height: 15px;
    }
  }
}
</style>
